<template>
	<view>
		<view class="tab_box">
			
			<view :class="{select_tab:tabFLag}" class="tab_item"
			@click="changeTab(true)">
				<text>学员动态</text>
			</view>
			<view :class="{select_tab:!tabFLag}" class="tab_item"
			@click="changeTab(false)">
				<text>作品欣赏</text>
			</view>
		</view>
		<view class="class-list ">
			<view v-for="(item,index) in classList" :key="index" @click="imgPreview(item.url)">
				
				<my-imageitem v-if="image_type!=3" :classes="item"></my-imageitem>
				<my-videoitem v-else :classes="item"></my-videoitem>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeObj:{
					class_type:0,
					image_type:1,
					pagenum:1,
					pagesize:10
				},
				classList:[],
				total:0,
				isloading:false,
				tabFLag:true
			};
		},
		onLoad(options) {
			this.typeObj.class_type = options.class_type || 0
			switch(this.typeObj.class_type){
				case 1:
					uni.setNavigationBarTitle({
						title:'书法课堂'
					})
				case 2:
					uni.setNavigationBarTitle({
						title:'编程课堂'
					})
				case 3:
					uni.setNavigationBarTitle({
						title:'画画课堂'
					})
				case 3:
					uni.setNavigationBarTitle({
						title:'积木课堂'
					})
			}
			this.getClassList()
		},
		onPullDownRefresh() {
			this.typeObj.pagenum=1
			this.typeObj.total =0
			this.isloading = false
			this.classList = []
			this.getClassList(()=>{uni.stopPullDownRefresh()})
		},
		onReachBottom() {
			if(this.isloading) return
			if(this.typeObj.pagenum*this.typeObj.pagesize >=this.typeObj.total) return
			this.typeObj.pagenum++
			this.getClassList()
		},
		methods:{
			async getClassList(){
				this.isloading = true
				// uni.$http.sslVerify = true
				const {data:res} = await uni.$http.get('/yzmimage/class_list',this.typeObj)
				this.isloading = false
				console.log(res)
				if(res.code !==200){
					return this.$showMsg()
				}
				this.classList = [...this.classList,...res.data]
				this.total = res.data.total
			},
			gotoGoodsDetail(item){
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id
				})
			},
			
			changeTab(status){
				this.tabFLag = status
				this.typeObj.image_type=(status?1:3)
				this.typeObj.pagenum=1
				this.typeObj.total =0
				this.isloading = false
				this.classList = []
				this.getClassList()
			},
			imgPreview(url) {
			            let arr = []
			            this.classList.forEach((item, index) => {
			                if (item.url) {
			                    arr.push(item.url)
			                }
			            })
			            let index = arr.findIndex(value => value == url)
			            uni.previewImage({
			                current: index,
			                urls: arr,
			            });
			        },
		}
	}
</script>

<style lang="scss">
.tab_box{
	margin: 10px 0;
	display: flex;
	justify-content: space-between;
	.tab_item{
		width: 200px;
		height: 40px;
		line-height: 40px;
		text-align:center;
		font-weight:bold;
		background-color: pink;
		
	}
	.select_tab{
		background-color: skyblue;
	}
}
.class-list{
	// width: 100%;
	height: 100%;
	margin: 0 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
}
</style>
